<template>
  <view class="post-list-container">
<!--    &lt;!&ndash; 搜索栏 &ndash;&gt;-->
<!--    <view class="search-box">-->
<!--      <u-search placeholder="请输入关键字" v-model="searchKeyword" @search="handleSearch" @custom="handleSearch"></u-search>-->
<!--    </view>-->

    <!-- 帖子列表 -->
    <view class="post-list">
      <view
          class="post-card"
          v-for="(post, index) in postList"
          :key="post.id"
      >
        <!-- 帖子内容 -->
        <view class="post-content">
          <view style="display: flex;justify-content: flex-end;margin-bottom: 20rpx">
            <!-- 状态标签 -->
            <view class="status-tag" :class="[getStatusClass(post.status)]">
              {{ getStatusText(post.status) }}
            </view>

          </view>
          <!-- 定制信息卡片 -->
          <view class="custom-info-card">
            <view class="info-row">
              <text class="info-label">姓名:</text>
              <text class="info-value">{{ post.name || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">电话:</text>
              <text class="info-value">{{ post.phone || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">出行日期:</text>
              <text class="info-value">{{ formatDate(post.travel_date) || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">目的地:</text>
              <text class="info-value">{{ post.destination || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">成人数:</text>
              <text class="info-value">{{ post.adult_count || 0 }}人</text>
            </view>
            <view class="info-row">
              <text class="info-label">儿童人数:</text>
              <text class="info-value">{{ post.child_count || 0 }}人</text>
            </view>
            <view class="info-row">
              <text class="info-label">预算:</text>
              <text class="info-value">{{ post.budget || '-' }}</text>
            </view>
          </view>

          <view class="post-images" v-if="getImageArray(post.plan_file_path).length > 0">
            <image
                class="post-image"
                v-for="(image, index) in getImageArray(post.plan_file_path)"
                :key="index"
                :src="image"
                mode="aspectFill"
                @click="previewImage(post.plan_file_path, index)"
            />
          </view>
        </view>

        <!-- 帖子底部 -->
        <view class="post-footer">
          <text class="post-time">{{ formatTime(post.create_time) }}</text>
        </view>
      </view>
    </view>
    <u-empty text="暂无内容" v-if="postList.length === 0"></u-empty>
    <!-- 加载更多 -->
    <view class="no-more" v-if="!hasMore && postList.length > 0">
      <text>没有更多内容了</text>
    </view>
  </view>

</template>

<script>

export default {
  data() {
    return {
      current: 3,
      postList: [],
      page: 1,
      limit: 10,
      loading: false,
      hasMore: true,
      searchKeyword: ''
    }
  },
  onLoad() {
    this.getPostList()
  },
  onPullDownRefresh() {
    this.refresh()
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },
  methods: {
    async getPostList() {
      uni.showLoading({
        title: '加载中...'
      })
      try {
        const response = await this.$api.getTravelCustomPage({
          pageNo: this.page,
          pageSize: this.limit,
          user_id: this.userInfo.id
        })
        const { list, total } = response
        let _list = list.map(item => {
          return {
            ...item,
          }
        })
        if (this.page === 1) {
          this.postList = _list
        } else {
          this.postList = [...this.postList, ..._list]
        }

        this.hasMore = this.postList.length < total

      } finally {
        uni.hideLoading()
        uni.stopPullDownRefresh()
      }
    },

    async refresh() {
      this.page = 1
      this.hasMore = true
      await this.getPostList()
    },

    async loadMore() {
      if (this.loading || !this.hasMore) return

      this.page++
      await this.getPostList()
    },

    handleSearch() {
      this.refresh()
    },

    goToPublish() {
      uni.navigateTo({
        url: '/pages/userPost/publish'
      })
    },

    getImageArray(images) {
      if (!images) return []
      return images.split(',').filter(img => img.trim())
    },

    previewImage(images, current) {
      const imageArray = this.getImageArray(images)
      uni.previewImage({
        urls: imageArray,
        current: imageArray[current]
      })
    },

    async toggleLike(post) {
      if (post.isLiked) {
        await this.$api.unlikeUserPost(post.id, { user_id: this.getCurrentUserId() })
        post.like_count--
        post.isLiked = false
      } else {
        await this.$api.likeUserPost(post.id, { user_id: this.getCurrentUserId() })
        post.like_count++
        post.isLiked = true
      }
      uni.hideLoading()
    },

    getCurrentUserId() {
      // 从本地存储或全局状态获取当前用户ID
      return this.userInfo?.id || 1
    },

    formatTime(timeStr) {
      if (!timeStr) return ''

      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date

      const minute = 60 * 1000
      const hour = 60 * minute
      const day = 24 * hour

      if (diff < minute) {
        return '刚刚'
      } else if (diff < hour) {
        return Math.floor(diff / minute) + '分钟前'
      } else if (diff < day) {
        return Math.floor(diff / hour) + '小时前'
      } else {
        return date.toLocaleDateString()
      }
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },

    getStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '处理中',
        2: '已完成',
        3: '已取消'
      }
      return statusMap[status] || '未知状态'
    },

    getStatusClass(status) {
      const classMap = {
        0: 'status-pending',
        1: 'status-processing',
        2: 'status-completed',
        3: 'status-cancelled'
      }
      return classMap[status] || 'status-unknown'
    }
  }
}
</script>

<style lang="scss">
.post-list-container {
  background-color: #f5f5f5;
  min-height: 100vh;

  .search-box {
    background-color: #fff;
    padding: 24rpx;
  }

  .post-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .post-card {
    background: white;
    border-radius: 12rpx;
    padding: 30rpx;
    margin: 24rpx;
    margin-bottom: 0;
  }

  .post-header {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .user-info {
    flex: 1;
  }

  .username {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 8rpx;
  }

  .university-tag {
    background: #f0f0f0;
    color: #666;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    display: inline-block;
  }

  .post-content {
    margin-bottom: 25rpx;
    position: relative;
  }

  .status-tag {
    padding: 8rpx 16rpx;
    border-radius: 12rpx;
    font-size: 24rpx;
    font-weight: 500;
    z-index: 10;

    &.status-pending {
      background-color: #fff3cd;
      color: #333;
      border: 1rpx solid #ffeaa7;
    }

    &.status-processing {
      background-color: #d1ecf1;
      color: #0c5460;
      border: 1rpx solid #bee5eb;
    }

    &.status-completed {
      background-color: #d4edda;
      color: #155724;
      border: 1rpx solid #c3e6cb;
    }

    &.status-cancelled {
      background-color: #f8d7da;
      color: #721c24;
      border: 1rpx solid #f5c6cb;
    }

    &.status-unknown {
      background-color: #e2e3e5;
      color: #383d41;
      border: 1rpx solid #d6d8db;
    }
  }

  .post-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
    display: block;
  }

  .custom-info-card {
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 24rpx;
    margin: 20rpx 0;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .info-row:last-child {
    margin-bottom: 0;
  }

  .info-label {
    font-size: 28rpx;
    color: #666;
    font-weight: normal;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
    text-align: right;
    font-weight: normal;
  }

  .post-images {
    margin-top: 20rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
  }

  .post-image {
    width: 100%;
    height: 200rpx;
    border-radius: 15rpx;
  }

  .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .post-time {
    font-size: 24rpx;
    color: #999;
  }

  .interaction-buttons {
    display: flex;
    gap: 30rpx;
  }

  .interaction-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
  }

  .like-icon {
    width: 32rpx;
    height: 32rpx;

    &.liked {
      filter: brightness(1.2);
    }
  }

  .comment-icon, .view-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .count {
    font-size: 24rpx;
    color: #666;
  }

  .load-more, .no-more {
    text-align: center;
    padding: 40rpx;
    color: #999;
    font-size: 28rpx;
  }
}

</style>
